<template>
    <div class="app">
        <template v-for="(item, index) in content" :key="item">
            <button :class="{ active: nowindex === index }" @click="clickitem(index)">{{ item }}</button>
        </template>

        <div class="view">
            <!-- 这样就写死了 -->
            <!-- <component is="center"></component> -->
            <!--动态拿到索引  -->
            <!-- 1.父组件动态传值給子组件 -->
            <!-- 2.父组件监听子组件的方法 -->
            <!-- keep-alive 可以缓存 只缓存这两个 -->
            <component name="小染呀" :age="19" @clickhomebut="homeapp" :is="content[nowindex]"></component>
            <!-- 也可以直接写值 简洁些 -->

        </div>
    </div>
</template>
<script>
import home from './Home.vue'
import center from './center.vue'
import about from './About.vue'
export default {
    components: {
        home,
        center,
        about
    },
    data() {
        return {
            content: ["home", "center", "about"],
            nowindex: 0
        }
    },
    methods: {
        clickitem(index) {
            this.nowindex = index
        },
        // 拿到传来的参数
        homeapp(payload) {
            console.log("homeapp:", payload)
        }
    }
}
</script>
<style scoped lang="less">
.active {
    color: skyblue;
}
</style>
